<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>图片广告</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<el-form-item label="图片类型">
					<el-radio-group v-model="form.type">
						<el-radio label="1">一行一个 </el-radio>
						<el-radio label="2">轮播海报</el-radio>
						<el-radio label="3">横向滑动</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-divider />
				<h4>添加图片</h4>
				<p>建议图片尺寸宽度750，高度不限制。</p>
				<div class="img-item" v-for="(item, index) in form.imageList" :key="index">
					<div class="left-img">
						<div class="choose-image">
							<div @click="chooseImage(index)" v-if="!item.url">
								<el-icon :size="20">
									<ele-Plus />
								</el-icon>
							</div>
							<img v-if="item.url" style="width: 100%; height: 100%" :src="item.url" />
							<span v-if="item.url" class="modify-image" @click="chooseImage(index)">更换图片 </span>
						</div>
					</div>
					<div class="img-info">
						<div class="info-top">
							<div>
								<p>链接配置</p>
							</div>
							<div>
								<el-icon v-if="form.imageList.length > 1" :size="20" style="cursor: pointer"
									@click="del(index)">
									<ele-Delete />
								</el-icon>
							</div>
						</div>
						<linkPage ref="linkPageUrl" :pageUrl="item.linkUrl" :pageName="item.linkTitle"
							@linkPageCurrent="(item.linkUrl = $event.pageUrl), (item.linkTitle = $event.pageName)">
						</linkPage>
					</div>
				</div>
				<div class="add-btn">
					<el-button @click="add" v-if="form.imageList && form.imageList.length < limitNum">
						<el-icon :size="20"> <ele-Plus /> </el-icon>添加图片（{{ form.imageList.length }}/{{ limitNum
						}}）</el-button>
				</div>
				<el-form-item label="边角样式">
					<el-radio-group v-model="form.cornerStyle">
						<el-radio label="1">方角 </el-radio>
						<el-radio label="2">圆角</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="页面边距">
					<el-slider v-model="form.styleMargin" show-input :show-input-controls="false" :min="0" :max="30" />
				</el-form-item>
				<el-form-item label="图片边距" v-if="form.type == '1'">
					<el-slider v-model="form.stylePadding" show-input :show-input-controls="false" :min="0" :max="30" />
				</el-form-item>
			</el-form>
		</div>
		<imgDialog ref="imgDialogRef" :canChooseImagesNum="1" @changeImg="changeImg"></imgDialog>
	</div>
</template>

<script lang="ts">
import linkPage from './linkPage.vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import { reactive, defineComponent, toRefs, watch, ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import imgDialog from '/@/components/selectMaterial/imgDialog/index.vue';
export default defineComponent({
	components: { linkPage, imgDialog },
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// do not use same name with ref
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		const dragOptions = ref({
			nimation: 200,
			group: 'description',
			disabled: false,
			ghostClass: 'ghost',
		});
		const imgDialogRef = ref();
		const chooseImageIndex = ref();
		const limitNum = ref(10);
		const state = reactive({
			form: {
				type: '1',
				cornerStyle: '1',
				stylePadding: 0,
				styleMargin: 0,
				imageList: [{ url: undefined, linkUrl: undefined, linkTitle: undefined }],
			},
		});
		const chooseImage = (index: number) => {
			chooseImageIndex.value = index;
			imgDialogRef.value.dialog = true;
		};
		const add = () => {
			if (state.form.imageList.length < limitNum.value) {
				state.form.imageList.push({
					url: undefined,
					linkUrl: undefined,
					linkTitle: undefined,
				});
			}
		};
		const del = (index: number) => {
			ElMessageBox.confirm("确定删除吗？", '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				state.form.imageList.splice(index, 1);
			});
		};
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					type: '1',
					cornerStyle: '1',
					stylePadding: 0,
					styleMargin: 0,
					imageList: [{ url: undefined, linkUrl: undefined, linkTitle: undefined }],
				};
			} else {
				state.form = props.formData;
			}
			if (diyPageData.value.selectedIndex != undefined) {
				diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
			}
		});
		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		const changeImg = (data: any) => {
			state.form.imageList[chooseImageIndex.value].url = data[0];
			// emit('update:modelValue', [...props.modelValue, ...data]);
		};
		const linkPageCurrent = (page: any) => { };
		return {
			limitNum,
			imgDialogRef,
			dragOptions,
			chooseImageIndex,
			add,
			del,
			changeImg,
			chooseImage,
			linkPageCurrent,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';

.img-item {
	display: flex;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 10px;
	padding: 10px;

	.left-img {
		width: 90px;
		height: 90px;
		border-radius: 2px;
		border: 1px solid #eee;

		.choose-image {
			position: relative;
			width: 90px;
			height: 90px;
			line-height: 90px;
			text-align: center;

			// display: flex;
			// flex-direction: column;
			// align-items: center;
			.modify-image {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				cursor: pointer;
			}
		}

		&:hover {
			cursor: pointer;
		}
	}

	.img-info {
		padding-left: 5px;

		p {
			padding-bottom: 10px;
		}

		.info-top {
			display: flex;
			justify-content: space-between;
		}
	}
}

.add-btn {
	padding-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
